<template>
  <div>

    <div>
      <coupon v-if="couponList.length" :disabled-tips="currentMenu == 2 ? '该优惠券已过期' : '该优惠券已使用'"
        :disabled="currentMenu == 2 || currentMenu == 1" v-for="(item, index) in couponList" :key="index" :res="item">
        <template #footer>
          <div class="use" text-main-color text-24rpx mt-20rpx @click="clickCoupon(item)">
            {{ routerVal.selectedCoupon.includes(item.id) ? '取消使用' : '立即使用' }}
          </div>
        </template>
      </coupon>
      <div v-if="!couponList.length" mt-100rpx>
        <!-- <div v-if="!couponList.length && screen" :style="{ height: (screen.windowHeight - 44 - 46) + 'px' }"> -->
        <empty text="暂无优惠券" />
      </div>
    </div>

    <nut-toast ref="toastRef" cover />
  </div>
</template>

<script setup lang="ts">
import coupon from '@/components/basic-template/coupon.vue';
import empty from '@/components/empty/index.vue';
import { useCoupon } from '@/api/trade';
import storage from '@/utils/storage';
import { onLoad } from '@dcloudio/uni-app';
const screen = ref<any>('')
const routerVal = ref<any>('')
const toastRef = ref<any>(null)

const currentMenu = ref<number>(0)

const couponList = ref<any>([])

async function clickCoupon(coupon: any) {
  toastRef.value?.showToast['loading']('加载中', {
    cover: true,
    duration: 0
  })
  try {
    const res = await useCoupon({
      memberCouponId: coupon.id,
      used: !routerVal.value.selectedCoupon.includes(coupon.id),
      way: routerVal.value.way,
    })
    toastRef.value?.hideToast()
    if (res.data.success) {
      uni.navigateBack();
    } else {

    }
  } catch (e) {
    toastRef.value?.hideToast()
  }

}

function init() {

  couponList.value = storage.getCanUseCoupon()

}

onLoad(async (options: any) => {
  routerVal.value = options
})


onMounted(async () => {
  init();
})


</script>

<style scoped lang="scss">
.custom-tabpane-coupon {
  background: #f8f8f8 !important;
  padding: 16rpx 0 !important
}
</style>
